<template>
  <el-container>
    <el-header height="40px" style="background-color: #00838f;position: relative">
      <h3 style="color: #fff;line-height: 40px;font-family: 'Microsoft YaHei',serif;width: 50%">一级分类管理</h3>
      <el-button type="text" icon="el-icon-plus" class="addBTN" @click="handleAdd"></el-button>
    </el-header>
    <el-main style="background-color: #fff;">
      <el-container>
        <el-main>
          <el-table
            ref="multipleTable"
            :data="list.slice((currentPage-1)*pageSize,currentPage*pageSize)"
            style="width: 100%"
            highlight-current-row
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              label="一级分类编码"
              align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.mainTypeCode }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="一级分类名称"
              align="center">
              <template slot-scope="scope">
                <span>{{scope.row.mainTypeName}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="状态"
              align="center"
              prop="tag"
              :filters="[{text:'启用', value:'启用'},{text:'停用', value:'停用'}]"
              :filter-method="filterTag"
              filter-placement="bottom-end">
              <template slot-scope="scope">
                <el-tag :type="toggleButtonChange(scope.row.state).StateColor">
                  {{scope.row.state}}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作"
                             width="224px"
                             align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="success"
                  @click="handleCheck(scope.$index, scope.row)">查看</el-button>
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  v-if="$store.state.userInfo.employeeLv!=='门店管理员'">编辑</el-button>
                <el-button
                  size="mini"
                  :type="toggleButtonChange(scope.row.state).color"
                  @click="singleMainTypeToggle(scope.$index, scope.row)"
                  v-if="$store.state.userInfo.employeeLv!=='门店管理员'">{{toggleButtonChange(scope.row.state).string}}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
        <el-footer>
          <div class="myLeft">
            <el-button size="mini" type="danger" @click="handleDisable" v-if="this.$store.state.userInfo.employeeLv!=='门店管理员'">停用选中</el-button>
            <el-button size="mini" type="success" @click="handleEnable" v-if="this.$store.state.userInfo.employeeLv!=='门店管理员'">启用选中</el-button>
            <!--<el-button size="mini" type="info" disabled>导出 Excel</el-button>-->
          </div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="list.length"
            class="myRight">
          </el-pagination>
        </el-footer>
      </el-container>
    </el-main>
    <el-dialog title="编辑一级分类" :visible.sync="mainTypeEditDialogVisible" width="355px">
      <el-form :model="editForm">
        <el-form-item label="编辑名称" :label-width="formLabelWidth">
          <el-input v-model="editForm.mainTypeName" autocomplete="off" :placeholder="editForm.mainTypeName"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="mainTypeEditDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editFormSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="二级分类列表" :visible.sync="subDialogVisible">
      <el-table :data="subTypeList" width="100%" empty-text="当前一级分类下无二级分类">
        <el-table-column width="80px" align="center" property="sub_type_id" label="二级分类编码"></el-table-column>
        <el-table-column  align="center" property="sub_type_name" label="二级分类名称"></el-table-column>
        <el-table-column width="80px" align="center" property="sub_type_state" label="状态"></el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleSubCurrentChange"
        :current-page="currentSubPage"
        layout="total, prev, pager, next"
        :total="subTypeList.length">
      </el-pagination>
      <div slot="footer" class="dialog-footer">
        <el-button @click="subDialogVisible = false">返回</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加一级分类" :visible.sync="mainTypeAddDialogVisible" width="355px">
      <el-form :model="addForm">
        <el-form-item label="新的名称" :label-width="formLabelWidth">
          <el-input v-model="addForm.mainTypeName" autocomplete="off" placeholder="请输入新一级分类名称"></el-input>
        </el-form-item>
        <el-form-item label="一级分类状态" :label-width="formLabelWidth">
          <el-select v-model="addForm.mainTypeState" filterable placeholder="新二级分类状态" :value="addForm.mainTypeState">
            <el-option key="启用" label="启用" value="启用"></el-option>
            <el-option key="停用" label="停用" value="停用"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="mainTypeAddDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addFormSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
export default {
  name: 'mainType',
  components: {
  },
  // 表格数据的操作方法
  data () {
    return {
      mainTypeList: [],
      currentPage: 1,
      currentSubPage: 1,
      pageSize: 10,
      list: [],
      chosenList: [],
      mainTypeEditDialogVisible: false,
      subDialogVisible: false,
      mainTypeAddDialogVisible: false,
      formLabelWidth: '100px',
      editForm: {
        mainTypeName: null,
        mainTypeCode: null
      },
      addForm: {
        mainTypeName: null,
        mainTypeState: '启用'
      },
      subTypeList: [],
      search: {
        method: '编码',
        value: null
      }
    }
  },

  methods: {
    // 分页控制开始
    handleSizeChange (val) {
      this.pageSize = val
    },
    handleCurrentChange (val) {
      this.currentPage = val
    },
    handleSubCurrentChange (val) {
      this.currentSubPage = val
    },
    // 分页控制结束
    //  多选行
    handleSelectionChange (val) {
      this.chosenList = []
      val.forEach((val, index, arr) => {
        this.chosenList.push(val.mainTypeCode)
      })
    },
    //  编辑
    handleEdit (index, row) {
      this.editForm.mainTypeName = row.mainTypeName
      this.editForm.mainTypeCode = row.mainTypeCode
      this.mainTypeEditDialogVisible = true
    },
    handleAdd () {
      this.mainTypeAddDialogVisible = true
    },
    editFormSubmit () {
      this.$axiosx.post('/api/backEditMainType', this.editForm)
        .then((response) => {
          this.$message({
            type: response.data,
            message: '操作成功'
          })
          this.mainTypeEditDialogVisible = false
          this.refreshData()
        })
        .catch((error) => {
          this.$message({
            type: 'error',
            message: '操作失败，请重试！'
          })
          this.mainTypeEditDialogVisible = false
          this.refreshData()
          console.log(error)
        })
    },
    addFormSubmit () {
      this.$axiosx.post('/api/backAddMainType', this.addForm)
        .then((response) => {
          this.$message({
            type: response.data,
            message: '添加成功'
          })
        })
        .catch(error => console.log(error))
      this.mainTypeAddDialogVisible = false
      this.refreshData()
    },
    //  停用单个
    singleMainTypeToggle (index, row) {
      if (row.state === '启用') {
        this.mainTypeStateToggle([row.mainTypeCode], '停用')
      } else {
        this.mainTypeStateToggle([row.mainTypeCode], '启用')
      }
    },
    handleCheck (index, row) {
      console.log(row)
      this.$axiosx.get(`/api/backMainGetSub?mainTypeCode=${row.mainTypeCode}`)
        .then((response) => {
          this.subTypeList = response.data
        })
        .catch((error) => {
          console.log(error)
        })
      this.subDialogVisible = true
    },
    handleDisable () {
      this.mainTypeStateToggle(this.chosenList, '停用')
    },
    handleEnable () {
      this.mainTypeStateToggle(this.chosenList, '启用')
    },
    mainTypeStateToggle (arr, method) {
      this.$confirm(`此操作将${method}选中一级分类, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axiosx.post('/api/backMainTypeToggle', {
          arr: arr,
          method: method
        })
          .then((response) => {
            if (response.data === 'success') {
              this.$message({
                type: response.data,
                message: '操作成功'
              })
              this.refreshData()
            }
          })
          .catch((error) => {
            console.log(error.message)
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    toggleButtonChange (param) {
      if (param === '启用') {
        return {
          string: '停用',
          color: 'danger',
          StateColor: 'success'
        }
      } else {
        return {
          string: '启用',
          color: 'success',
          StateColor: 'danger'
        }
      }
    },
    dataFilter () {
      switch (this.search.method) {
        case '编码':
          this.list.forEach((val, index, arr) => {
            if (val.subTypeCode === parseFloat(this.search.value)) {
              this.list = [val]
            }
          })
          break
        case '名称':
          let showData = []
          this.list.forEach((val, index, arr) => {
            if (val.subTypeName.indexOf(this.search.value) >= 0) {
              showData.push(val)
            }
          })
          this.list = showData
          break
        case '一级分类':
          let showData2 = []
          this.list.forEach((val, index, arr) => {
            if (val.mainTypeName.indexOf(this.search.value) >= 0) {
              showData2.push(val)
            }
          })
          this.list = showData2
          break
      }
    },
    filterTag (value, row) {
      return row.state === value
    },
    refreshData () {
      this.$axiosx.get('/api/backGetMainType')
        .then((response) => {
          this.list = response.data
        })
        .catch((error) => {
          console.log(error.message)
        })
    }
  },
  created () {
    this.refreshData()
  }
}
</script>

<style scoped lang="less">

</style>
